<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sortable</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Sortable</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p> The Sortable Utility allows you to create a sortable list from a container and a group of children. It also allows you to join lists together in various ways.</p>
</div>

<h2 id="getting-started">Getting Started</h2>

<p>
To include the source files for Sortable and its dependencies, first load
the YUI seed file if you haven't already loaded it.
</p>

<pre class="code prettyprint">&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.0&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;</pre>


<p>
Next, create a new YUI instance for your application and populate it with the
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
YUI will automatically load any dependencies required by the modules you
specify.
</p>

<pre class="code prettyprint">&#x2F;&#x2F; Create a new YUI instance and populate it with the required modules.
YUI().use(&#x27;sortable&#x27;, function (Y) {
    &#x2F;&#x2F; Sortable is available and ready for use. Add implementation
    &#x2F;&#x2F; code here.
});</pre>


<p>
For more information on creating YUI instances and on the
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
documentation for the <a href="../yui/index.html">YUI Global object</a>.
</p>



<h2 id="basic">A Basic Sortable List</h2>
<p>The most common use case of a sortable list is an Unordered List.</p>
<p>Below is the sample markup used to create a <code>container</code> and a list.</p>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;Item #1&lt;&#x2F;li&gt;
        &lt;li&gt;Item #2&lt;&#x2F;li&gt;
        &lt;li&gt;Item #3&lt;&#x2F;li&gt;
        &lt;li&gt;Item #4&lt;&#x2F;li&gt;
        &lt;li&gt;Item #5&lt;&#x2F;li&gt;
        &lt;li&gt;Item #6&lt;&#x2F;li&gt;
        &lt;li&gt;Item #7&lt;&#x2F;li&gt;
        &lt;li&gt;Item #8&lt;&#x2F;li&gt;
        &lt;li&gt;Item #9&lt;&#x2F;li&gt;
        &lt;li&gt;Item #10&lt;&#x2F;li&gt;
    &lt;&#x2F;ul&gt;
&lt;&#x2F;div&gt;</pre>


<p>To turn this into a sortable list, you just need to create the <code>Sortable</code> object and tell it the <code>container</code> and the <code>nodes</code>.</p>
<p>The <code>nodes</code> can be any selector string that matches a child of the <code>container</code>. For performance reasons you will want to make the <code>container</code> an element that is as close to the <code>nodes</code> as possible. The farther away in the DOM the <code>container</code> is from the <code>nodes</code> the worse the performance will be.</p>

<pre class="code prettyprint">YUI().use(&#x27;sortable&#x27;, function(Y) {
    var sortable = new Y.Sortable({
        container: &#x27;#demo&#x27;,
        nodes: &#x27;li&#x27;,
        opacity: &#x27;.1&#x27;
    });
});</pre>


<p><strong>Note:</strong> <code>Sortable</code> does not auto find your drop target items, if you change the <code>nodes</code> under the hood (add or remove) you need to call <code>sortable.sync()</code> to manage them.</p>

<h2 id="events">Events</h2>

<p>Sortable uses <code>DD.Delegate</code> under the hood to handle the Drag and Drop operations. It sets itself as the <code>bubbleTarget</code> of the <code>Delegate</code> instance, so all <code>DD</code>-related events are bubbled to it.</p>
<p>For more information on <code>DD</code> related events, see the <a href="../dd/#events">events section on the Drag and Drop page</a>.</p>


<h2 id="joining">Joining Lists</h2>

<p>By default, a <code>Sortable</code> list can only interact with itself; you can't drag from one <code>Sortable</code> list to another. But a <code>Sortable</code> instance can be configured to be joined with another <code>Sortable</code> instance.</p>
<p>There are four ways a <code>Sortable</code> list can be joined: <code>inner</code>, <code>outer</code>, <code>full</code> and <code>none</code> (<code>none</code> is the default).</p>

<table>
    <thead>
        <tr>
            <th nowrap="nowrap">Join Type</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td nowrap="nowrap"><code>inner</code></td>
            <td>Items in the joined list can be moved into the main list but items in the main list can not be moved to the joined list.</td>
        </tr>
        <tr class="odd">
            <td nowrap="nowrap"><code>outer</code></td>
            <td>Items in the main list can be moved into the joined list but items in the joined list can not be moved to the main list.</td>
        </tr>
        <tr>
            <td nowrap="nowrap"><code>full</code></td>
            <td>All items in both lists can be moved into and out of any other joined list.</td>
        </tr>
        <tr class="odd">
            <td nowrap="nowrap"><code>none</code></td>
            <td>The default join type. No interaction with other lists.</td>
        </tr>
    </tbody>
</table>

<pre class="code prettyprint">YUI().use(&#x27;sortable&#x27;, function(Y) {
    var sortable1 = new Y.Sortable({
        container: &#x27;#demo1&#x27;,
        nodes: &#x27;li&#x27;,
        opacity: &#x27;.1&#x27;
    });

    var sortable2 = new Y.Sortable({
        container: &#x27;#demo2&#x27;,
        nodes: &#x27;li&#x27;,
        opacity: &#x27;.1&#x27;
    });

    sortable1.join(sortable2, &#x27;full&#x27;);
});</pre>


<p>You can also join multiple lists in multiple ways to get the experience you are looking for.</p>

<pre class="code prettyprint">YUI().use(&#x27;sortable&#x27;, function(Y) {
    var sortable1 = new Y.Sortable({
        container: &#x27;#demo1&#x27;,
        nodes: &#x27;li&#x27;,
        opacity: &#x27;.1&#x27;
    });

    var sortable2 = new Y.Sortable({
        container: &#x27;#demo2&#x27;,
        nodes: &#x27;li&#x27;,
        opacity: &#x27;.1&#x27;
    });

    var sortable3 = new Y.Sortable({
        container: &#x27;#demo3&#x27;,
        nodes: &#x27;li&#x27;,
        opacity: &#x27;.1&#x27;
    });

    sortable1.join(sortable2, &#x27;inner&#x27;);
    sortable2.join(sortable3, &#x27;outer&#x27;);

    sortable3.join(sortable1, &#x27;full&#x27;);
    sortable3.join(sortable2, &#x27;full&#x27;);
});</pre>


<h2 id="plugins">Using DD Plugins</h2>
<p>The <code>DD.Delegate</code> object bound to a <code>Sortable</code> instance is exposed to allow you to easily attach plugins to a <code>Sortable</code> instance.</p>
<p>The <code>Sortable</code> instance has a <code>delegate</code> namespace, which is a reference to the internal <code>DD.Delegate</code> instance.</p>

<pre class="code prettyprint">var sortable = new Y.Sortable({
    container: &#x27;#demo&#x27;,
    nodes: &#x27;li&#x27;
});

sortable.delegate.dd.plug(SomeDDPlugin);</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#getting-started">Getting Started</a>
</li>
<li>
<a href="#basic">A Basic Sortable List</a>
</li>
<li>
<a href="#events">Events</a>
</li>
<li>
<a href="#joining">Joining Lists</a>
</li>
<li>
<a href="#plugins">Using DD Plugins</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Create a simple sortable list.">
                                        <a href="simple-sortable.html">Simple Sortable List</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Sortable list example with floated nodes.">
                                        <a href="sortable-float.html">Floated List</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Multiple Sortable Lists that are separate from one another.">
                                        <a href="sortable-multi.html">Multiple Lists</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Multiple Sortable Lists that are fully joined together.">
                                        <a href="sortable-multi-full.html">Multiple Lists - Full Join</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Multiple Sortable Lists that are outer joined together.">
                                        <a href="sortable-multi-out.html">Multiple Lists - Outer Join</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Multiple Sortable Lists that are inner joined together.">
                                        <a href="sortable-multi-in.html">Multiple Lists - Inner Join</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
